<script setup>
import { ref } from 'vue'

// 狗狗品种数据
const breeds = ref([
  {
    id: 1,
    name: '拉布拉多寻回犬',
    category: '中型犬',
    image: 'https://picsum.photos/id/1025/600/400',
    description: '拉布拉多寻回犬是一种中大型犬类，个性忠诚、大气、憨厚、温和、阳光、开朗、活泼，智商极高，也对人很友善，是非常适合被选作经常出入公共场合的导盲犬、地铁警犬、搜救犬和其他工作犬的狗品种。',
    characteristics: ['友善', '聪明', '活泼', '易训练'],
    origin: '加拿大',
    lifespan: '10-12年',
    weight: '25-36公斤',
    height: '54-62厘米'
  },
  {
    id: 2,
    name: '德国牧羊犬',
    category: '大型犬',
    image: 'https://picsum.photos/id/1027/600/400',
    description: '德国牧羊犬，别名德国黑背（贝），也就是人们常说的——德国狼犬，此犬种据说原产德国，唯一能够确认的就是，于1880年此犬已经在德国各地固定下来，并做为牧羊犬使用。他们敏捷，且适合动作式的工作环境，它们经常被部署各种任务。而后于第一次世界大战期间被德军募集，做为军犬随军。由德军取长补短培育后，基本定型。因为体型高大，外观威猛，且具备极强的工作能力，因此在全世界范围以军犬、警犬、搜救犬、导盲犬、牧羊犬、观赏犬，以及家养宠物犬等身份活跃。',
    characteristics: ['聪明', '勇敢', '忠诚', '警觉'],
    origin: '德国',
    lifespan: '9-13年',
    weight: '30-40公斤',
    height: '55-65厘米'
  },
  {
    id: 3,
    name: '金毛寻回犬',
    category: '大型犬',
    image: 'https://picsum.photos/id/1074/600/400',
    description: '金毛寻回犬是最常见的家犬之一，它很容易养，有耐心并且对主人要求不多，只要定期运动，食物和兽医体检就可以了。它属于匀称、有力、活泼的一个犬种，特征是稳固、身体各部位配合合理，腿既不太长也不笨拙，表情友善，个性热情、机警、自信而且不怕生，性格讨人喜欢。金毛犬最早是一种寻回猎犬，现在大多作为导盲犬与宠物狗。对小孩子或者婴儿十分友善。金毛犬是位列世界犬种智商排行的第四名。',
    characteristics: ['友善', '可靠', '自信', '聪明'],
    origin: '英国',
    lifespan: '10-12年',
    weight: '27-36公斤',
    height: '51-61厘米'
  },
  {
    id: 4,
    name: '贵宾犬',
    category: '小型犬',
    image: 'https://picsum.photos/id/1062/600/400',
    description: '贵宾犬，也称贵妇犬，又称卷毛狗，在德语中，Pudel是“水花飞溅”的意思，是犬亚科犬属的一种动物。贵宾犬的来源就像它为了拖出猎禽所涉过的水一样浑浊不清。活泼，性情优良，极易近人，是一种忠实的犬种。非常敏捷，聪明而优雅的狗，正方形结构、比例匀称，步伐有力而自信。',
    characteristics: ['活泼', '聪明', '优雅', '忠诚'],
    origin: '法国',
    lifespan: '12-15年',
    weight: '3-8公斤',
    height: '24-28厘米'
  },
  {
    id: 5,
    name: '哈士奇',
    category: '中型犬',
    image: 'https://picsum.photos/id/1029/600/400',
    description: '西伯利亚雪橇犬，常见别名哈士奇，昵称为二哈。西伯利亚雪橇犬体重介于雄犬20-27公斤，雌犬16-23公斤，身高大约雄犬肩高53-58厘米，雌犬51-56厘米，是一种中型犬。西伯利亚雪橇犬是原始的古老犬种，在西伯利亚东北部、格陵兰南部生活。哈士奇名字的由来，是源自其独特的嘶哑声。哈士奇性格多变，有的极端胆小，也有的极端暴力，进入大陆和家庭的哈士奇，都已经没有了这种极端的性格，比较温顺，是一种流行于全球的宠物犬。与金毛犬、拉布拉多并列为三大无攻击型犬类。',
    characteristics: ['活泼', '友好', '精力充沛', '独立'],
    origin: '俄罗斯',
    lifespan: '12-14年',
    weight: '16-27公斤',
    height: '51-60厘米'
  },
  {
    id: 6,
    name: '比熊犬',
    category: '小型犬',
    image: 'https://picsum.photos/id/1069/600/400',
    description: '比熊犬原产于地中海地区，是一种小型犬品种。它们不会自然脱毛，因此毛发需要整理。颜色一般白色。原称巴比熊犬，后缩为比熊犬。怀疑是巴比特犬和水猎融犬的后裔。是一种娇小的、强健的白色粉扑型的狗，具有欢快的性格，从它羽毛般欢快地卷在背后的尾巴和好奇的眼神中就能体现出来。',
    characteristics: ['开朗', '聪明', '友善', '适应性强'],
    origin: '地中海地区',
    lifespan: '12-15年',
    weight: '3-5公斤',
    height: '23-28厘米'
  }
])

// 分类筛选
const selectedCategory = ref('全部')
const categories = ref(['全部', '小型犬', '中型犬', '大型犬'])

// 获取筛选后的品种
const filteredBreeds = computed(() => {
  if (selectedCategory.value === '全部') {
    return breeds.value
  }
  return breeds.value.filter(breed => breed.category === selectedCategory.value)
})

// 导入计算属性
import { computed } from 'vue'
</script>

<template>
  <div class="breeds-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>狗狗品种介绍</h1>
      <p>探索各种犬种的特点、起源和养护知识</p>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
      <div class="filter-options">
        <span>按体型筛选：</span>
        <button
          v-for="category in categories"
          :key="category"
          :class="['filter-btn', { active: selectedCategory === category }]"
          @click="selectedCategory = category"
        >
          {{ category }}
        </button>
      </div>
    </div>
    
    <!-- 品种卡片列表 -->
    <div class="breeds-grid">
      <div v-for="breed in filteredBreeds" :key="breed.id" class="breed-card">
        <div class="breed-image">
          <img :src="breed.image" :alt="breed.name" />
          <span class="breed-category">{{ breed.category }}</span>
        </div>
        
        <div class="breed-info">
          <h3>{{ breed.name }}</h3>
          <p class="breed-description">{{ breed.description }}</p>
          
          <div class="breed-characteristics">
            <span v-for="trait in breed.characteristics" :key="trait" class="trait-tag">{{ trait }}</span>
          </div>
          
          <div class="breed-details">
            <div class="detail-item">
              <span class="detail-label">原产地：</span>
              <span class="detail-value">{{ breed.origin }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">寿命：</span>
              <span class="detail-value">{{ breed.lifespan }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">体重：</span>
              <span class="detail-value">{{ breed.weight }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">身高：</span>
              <span class="detail-value">{{ breed.height }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #ff7f00;
  --primary-hover: #e66f00;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --background-light: #f5f5f5;
  --white: #ffffff;
  --border-color: #e0e0e0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --transition: all 0.3s ease;
}

/* 页面整体样式 */
.breeds-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.page-header p {
  font-size: 18px;
  color: var(--text-secondary);
  margin: 0;
}

/* 筛选栏 */
.filter-bar {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 40px;
}

.filter-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-options span {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.filter-btn {
  padding: 8px 20px;
  border: 2px solid var(--border-color);
  background-color: var(--white);
  color: var(--text-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.filter-btn.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

/* 品种卡片网格 */
.breeds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  gap: 30px;
}

/* 品种卡片 */
.breed-card {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.breed-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* 品种图片 */
.breed-image {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.breed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.breed-card:hover .breed-image img {
  transform: scale(1.05);
}

.breed-category {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--primary-color);
  color: var(--white);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
}

/* 品种信息 */
.breed-info {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.breed-info h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.breed-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex: 1;
}

/* 特点标签 */
.breed-characteristics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.trait-tag {
  background-color: rgba(255, 127, 0, 0.1);
  color: var(--primary-color);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* 详细信息 */
.breed-details {
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.detail-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .breeds-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 28px;
  }
  
  .page-header p {
    font-size: 16px;
  }
  
  .filter-options {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .breed-image {
    height: 220px;
  }
}

@media (max-width: 480px) {
  .breeds-page {
    padding: 16px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .filter-bar {
    padding: 16px;
  }
  
  .breed-info {
    padding: 20px;
  }
  
  .breed-info h3 {
    font-size: 20px;
  }
  
  .detail-item {
    flex-direction: column;
    gap: 4px;
  }
}
</style>